<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>24201012904史岂嘉</title>
    <style>
        .icon {
            width: 1em;
            height: 35px;
            vertical-align: -0.15em;
            fill: currentColor;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: rgb(255, 255, 255);
        }
        /* 固定导航一起用 否则导航不出来 必须设置 */
        body{
            margin-bottom: 50px;
        }
        header>div{
            display: flex;
        }
        .reg{
            font-size: 10px;
            width: 60px;
            height: 30px;
            line-height: 30px;
            margin-left: 5px;
            margin-right: 5px;
        }
        .reg a{
            color: #fff;
        }
        main{
            width: 375px;
            margin: 3px auto 1px auto;
            overflow: hidden;
        }
        .btnSearch{
            height: 20px;
            line-height: 20px;
            background-color: rgb(0, 0, 0);
            font-size: 15px;
            color: #fff;
            padding: 0 5px;
            border-radius: 0 10px 10px 0;
            box-sizing: border-box;
            letter-spacing: 1px;
            display: inline-block;
            cursor: pointer;/* 鼠标样式变为手 */
        }
        .searchBox{/* 搜索大盒子 */
            margin-left: 20px;/* 搜索部分与logo的距离 */
            margin-right: 1px;/* 搜索部分与注册的距离 */
            margin-top: 2px;/* 搜索部分与网页顶部距离 */
        }
        .keyword{/* 搜索框 */
            height: 30px;
            width: 200px;
            background-color: rgb(0, 0, 0);
            font-size: 10px;
            padding-left: 2px;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
        }
        input{
            color: #fff;
        }
        .fleft{
            flex-direction: row;
        }
        .tab-title a:link,.tab-title a:visited{
            /* 超链接原始效果和点击后的 黑底白字 */
            display: inline-block;
            flex-direction: row;
            justify-content: flex-start;
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            background-color: #000;
            margin-left: 2px;
        }
        .tab-title a.first,.tab-title a:hover,.tab-title a:active{
            background-color: #000;
            color: rgb(234, 129, 146)
        }
        .tab-title{
            display: flex;
            justify-content: flex-start;
            height: 60px;
            background-color: #000;
        } 
        .content{
            width: 100%;
        }
        .swiper{
            width: 100%;
            height: 100%;
        }
        .swiper .swiper-wrapper{
            position: relative;
        }
        .swiper .swiper-wrapper img{
            width: 100%;
            height: 100%;
        }
        .swiper .swiper-wrapper p{
            margin: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 35px;
            padding-left: 10px;
            line-height: 35px;
            text-align: left;
            font-size: 20px;
            color: #ffffff;
            font-weight: bold;
            letter-spacing: 2px;
            background-color: rgba(9, 5, 5, 0.45);
        }
        .swiper-pagination{
            text-align: right;
        }
        .swiper-pagination-bullet{
            background-color: #fff;
        }
        nav{
            height: 78px;
        }
        .video-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .video-item {
            width: 48%;
            margin-bottom: 10px;
        }
        .video-item img {
            width: 100%;
        }
        .video-item>p{
            font-size: 0.6rem;
            text-align: center;
            line-height: 0.65rem;
            /* 文字显示单行，多余的文字显示... */
            text-overflow: ellipsis;/* 1 */
            overflow: hidden;/* 2 */
            white-space: nowrap;/* 3 */
            color: #fff;
        }
        .bnav{
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #000;
            width: 100%;
            z-index: 9;
        }
        .bnav>ul{
            display: flex;
        }
        .bnav li{/* 自适应宽度 5个li 100%/5=20% */
            width: 20%;
            text-align: center;
        }
        .bnav p{
            color: #fff;
            font-size: 10px;
            line-height: 26px;
            letter-spacing: 3px;
        }
        .bnav li:nth-child(1):hover p {
            color: rgb(234, 129, 146);
        }
        .bnav li:nth-child(2):hover p {
            color: rgb(234, 129, 146);
        }
        .bnav li:nth-child(4):hover p {
            color: rgb(234, 129, 146);
        }     
        .bnav li:nth-child(5):hover p {
            color: rgb(234, 129, 146);
        }
  </style>
</head>
<body>
    <header>
        <div class="wrapper">
            <!-- logo -->
             <div class="logo fleft">
                <img src="./img/touxiang.png" alt="">
             </div>
            <!-- 搜索 -->
             <div class="searchBox fleft">
                <input class="keyword fleft shadow" type="text" name="keyword" id="keyword" placeholder="请输入查询内容">
                <div class="btnSearch fleft shadow">搜索</div>
             </div>
            <!-- 注册登录 -->
             <div class="reg fleft">
                <a href="zhuce.html">注册</a>
                <span>&nbsp;|&nbsp;</span>
                <a href="#">登录</a>
             </div>
        </div>
    </header>

  <!-- 标签栏 -->
    <main>
        <ul class="tab-title">
            <li><a href="#">直播</a></li>
            <li><a href="./index.html" class="first">推荐</a></li>
            <li><a href="remen.html">热门</a></li>
            <li><a href="#">追番</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">新征程</a></li>
        </ul>
    

    <!-- 内容区域 -->
    <div class="content">
        <!-- 广告横幅 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./img/B1.avif" alt=""><!-- 上图 -->
                    <p>话术士</p><!-- 下文 -->
                </div>
                <div class="swiper-slide">
                    <img src="./img/B2.avif" alt="">
                    <p>夏目友人帐 第七季</p>
                </div>
                <div class="swiper-slide">
                    <img src="./img/B3.avif" alt="">
                    <p>神之塔 王子的归来</p><!-- 下文 -->
                </div>
                <div class="swiper-slide">
                    <img src="./img/B4.avif" alt="">
                    <p>英雄联盟:双城之战 第二季</p>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

    <!-- 视频列表 -->
    <div class="video-list">
        <li class="video-item">
            <img src="./img/lol.jpg" alt="Video 1">
            <p>《Spin The Wheel》MV | 《英雄联盟：双城之战》动画第二季原声歌曲 | 拳头游戏音乐</p>
        </li>
        <li class="video-item">
            <img src="./img/huoying.jpg" alt="Video 2">
            <p>乾坤未定，你我皆是黑马！超燃鬼叔假分杯第三届day2</p>
        </li>
        <li class="video-item">
            <img src="./img/guize.jpg" alt="Video 3">
            <p>（合集）月薪2万的动物饲养员，却没人能坚持1个星期</p>
        </li>
        <li class="video-item">
            <img src="./img/yunding.jpg" alt="Video 2">
            <p>扛伤30万反杀三星五费！</p>
        </li>
        <li class="video-item">
            <img src="./img/luoke.jpg" alt="Video 2">
            <p>瞒不住了！二测场景即录即爆【洛克王国：世界】</p>
        </li>
        <li class="video-item">
            <img src="./img/yiren.jpg" alt="Video 2">
            <p>《异人之下》游戏概念PV｜道隐凡尘</p>
        </li>
    </div> 
  </div>
</main>
  <!-- 底部导航栏 -->
    <script src="./font/iconfont.js"></script>
    <nav class="bnav">
        <ul>
            <li>
                <a href="index.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bzhan-shouye"></use>
                    </svg>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-dongtai"></use>
                    </svg>
                    <p>动态</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kuozhan"></use>
                    </svg>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huiyuangoujihuox"></use>
                    </svg>
                    <p>会员购</p>
                </a>
            </li>
            <li>
                <a  href="user.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bzhan-wode1"></use>
                    </svg>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </nav>
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper ('.swiper', {
          direction: 'horizontal', // 垂直切换选项 vertical  横向切换选项 horizontal
          loop: true, // 循环模式选项
          autoplay: true,
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },

      })        
      </script>
</body>
</html>